import { useState } from 'react'
import { showShortcutsHelp } from '../hooks/useKeyboardShortcuts'
import Tooltip from './Tooltip'

export default function HelpButton() {
  const [showMenu, setShowMenu] = useState(false)

  const helpItems = [
    {
      icon: '👋',
      title: '欢迎页面',
      description: '重新查看平台介绍和功能特色',
      action: () => {
        // 触发自定义事件来显示欢迎页
        window.dispatchEvent(new CustomEvent('showWelcome'))
        setShowMenu(false)
      }
    },
    {
      icon: '⌨️',
      title: '键盘快捷键',
      description: '查看所有可用的快捷键',
      action: () => {
        showShortcutsHelp()
        setShowMenu(false)
      }
    },
    {
      icon: '📖',
      title: '使用指南',
      description: '了解如何使用平台功能',
      action: () => {
        window.open('/docs/使用说明.md', '_blank')
        setShowMenu(false)
      }
    },
    {
      icon: '🎬',
      title: '功能演示',
      description: '观看操作演示视频',
      action: () => {
        alert('演示视频功能即将推出！')
        setShowMenu(false)
      }
    },
    {
      icon: '❓',
      title: '常见问题',
      description: '查看常见问题解答',
      action: () => {
        alert('FAQ功能即将推出！')
        setShowMenu(false)
      }
    }
  ]

  return (
    <div className="fixed bottom-6 right-6 z-50">
      {/* 帮助菜单 */}
      {showMenu && (
        <>
          {/* 背景遮罩 */}
          <div 
            className="fixed inset-0 bg-transparent" 
            onClick={() => setShowMenu(false)}
          ></div>

          {/* 菜单面板 */}
          <div className="absolute bottom-full right-0 mb-4 w-72 glass-effect-dark border border-white/10 rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
            <div className="p-4 border-b border-white/10">
              <h3 className="text-lg font-bold text-white flex items-center space-x-2">
                <span>📚</span>
                <span>帮助中心</span>
              </h3>
              <p className="text-xs text-gray-400 mt-1">快速获取帮助和指引</p>
            </div>

            <div className="p-2">
              {helpItems.map((item, index) => (
                <button
                  key={index}
                  onClick={item.action}
                  className="w-full p-3 rounded-xl text-left transition-all duration-300 flex items-start space-x-3 hover:bg-white/10 group"
                >
                  <div className="text-2xl flex-shrink-0 group-hover:scale-110 transition-transform">
                    {item.icon}
                  </div>
                  <div className="flex-1">
                    <div className="text-sm font-semibold text-white">{item.title}</div>
                    <div className="text-xs text-gray-400 mt-0.5">{item.description}</div>
                  </div>
                  <svg className="w-4 h-4 text-gray-500 group-hover:text-accent-blue transition-colors flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </button>
              ))}
            </div>

            <div className="p-4 border-t border-white/10 bg-white/5">
              <div className="text-xs text-gray-400 flex items-center space-x-2">
                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
                <span>按 <kbd className="px-1.5 py-0.5 bg-white/10 rounded text-xs font-mono">?</kbd> 查看快捷键</span>
              </div>
            </div>
          </div>
        </>
      )}

      {/* 帮助按钮 */}
      <Tooltip content="帮助中心" position="left">
        <button
          onClick={() => setShowMenu(!showMenu)}
          className={`
            group w-14 h-14 rounded-full flex items-center justify-center text-white font-bold text-xl
            transition-all duration-300 shadow-2xl hover:scale-110 active:scale-95
            ${showMenu 
              ? 'bg-gradient-to-br from-accent-purple via-accent-blue to-accent-cyan rotate-90' 
              : 'bg-gradient-to-br from-accent-blue to-accent-purple hover:shadow-accent-purple/50'
            }
          `}
        >
          {showMenu ? (
            <svg className="w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          ) : (
            <span className="group-hover:scale-110 transition-transform">❓</span>
          )}
          
          {/* 脉冲光环 */}
          {!showMenu && (
            <div className="absolute -inset-1 bg-gradient-to-br from-accent-purple to-accent-cyan rounded-full opacity-50 blur-lg group-hover:opacity-100 transition-opacity -z-10"></div>
          )}
        </button>
      </Tooltip>
    </div>
  )
}

